<!-- src/views/LoginView.vue -->
<template>
  <div class="login-container">
    <div class="login-form">
      <div class="login-header">
        <h1>教务管理系统</h1>
        <p>用户登录</p>
      </div>
      
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label>用户名</label>
          <input 
            v-model="loginForm.username" 
            type="text" 
            required 
            placeholder="请输入用户名"
          >
        </div>
        
        <div class="form-group">
          <label>密码</label>
          <input 
            v-model="loginForm.password" 
            type="password" 
            required 
            placeholder="请输入密码"
          >
        </div>
        
        <div class="form-group">
          <label>角色</label>
          <select v-model="loginForm.role" required>
            <option value="">请选择角色</option>
            <option value="admin">管理员</option>
            <option value="teacher">教师</option>
            <option value="student">学生</option>
          </select>
        </div>
        
        <button type="submit" class="login-btn" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </form>
      
      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

export default {
  name: 'LoginView',
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    
    const loginForm = ref({
      username: '',
      password: '',
      role: ''
    });
    
    const loading = ref(false);
    const errorMessage = ref('');

    const handleLogin = async () => {
      // 表单验证
      if (!loginForm.value.username.trim()) {
        errorMessage.value = '请输入用户名';
        return;
      }
      if (!loginForm.value.password.trim()) {
        errorMessage.value = '请输入密码';
        return;
      }
      if (!loginForm.value.role) {
        errorMessage.value = '请选择角色';
        return;
      }

      loading.value = true;
      errorMessage.value = '';

      try {
        console.log('🚀 开始登录...', loginForm.value);
        
        // 使用userStore的login方法，而不是setUser
        const success = await userStore.login(loginForm.value);
        
        if (success) {
          console.log('✅ 登录成功，跳转到首页');
          router.push('/dashboard');
        } else {
          errorMessage.value = '登录失败，请检查用户名和密码';
        }
      } catch (error) {
        console.error('💥 登录过程出错:', error);
        errorMessage.value = '登录失败，请稍后重试';
      } finally {
        loading.value = false;
      }
    };

    return {
      loginForm,
      loading,
      errorMessage,
      handleLogin
    };
  }
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-form {
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 400px;
  max-width: 90vw;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.login-header p {
  color: #7f8c8d;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2c3e50;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #3498db;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.login-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.login-btn:hover:not(:disabled) {
  background: #2980b9;
}

.error-message {
  background: #ffebee;
  color: #d32f2f;
  padding: 10px;
  border-radius: 4px;
  margin-top: 15px;
  text-align: center;
}
</style>